<template>
  <a-modal title="新增品牌" v-model="show" :maskClosable="false" :width="1050" placement="right" :closable="true"
    @cancel="onClose" :footer="null" :visiable="brandAddVisiable">
    <a-form :form="form">
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端品牌代码" v-bind="formItemLayout">
            <a-input v-decorator="['brandCode']" :disabled="true" />
            <!-- <a-input v-decorator="['brandCode',{rules: [{ required: true, message: '终端品牌代码不能为空'}]}]"/>-->
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='终端品牌名称' v-bind="formItemLayout">
            <a-input v-decorator="['brandName', { rules: [
              { required: true, message: '终端品牌名称不能为空' },
              { max: 20, message: '长度不能超过20个字符' }
            ] }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="终端品牌描述" v-bind="formItemLayout">
            <a-input v-decorator="['brandDesc',{rules:[{validator:contactBrandDesc}]}]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='联系人姓名' v-bind="formItemLayout">
            <a-input v-decorator="['contactName', { rules: [
              { required: true, message: '联系人不能为空' },
              { max: 20, message: '长度不能超过20个字符' }
              ] }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <a-row>
        <a-col :md="12" :sm="24">
          <a-form-item label="联系电话" v-bind="formItemLayout">
            <a-input v-decorator="['contactPhone', {
              rules: [{ required: true, message: '请输入联系电话' },
              { pattern: '^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$', message: '请输入正确的联系电话' }
              ]
            }]" />
          </a-form-item>
        </a-col>
        <a-col :md="12" :sm="24">
          <a-form-item label='联系人电子邮箱' v-bind="formItemLayout">
            <a-input v-decorator="['contactEmail', {
              rules: [
                { type: 'email', message: '请输入正确的邮箱' },
                { max: 50, message: '长度不能超过50个字符' }
              ]
            }]" />
          </a-form-item>
        </a-col>
      </a-row>
      <br>

    </a-form>
    <div class="drawer-bootom-button">
      <a-popconfirm title="确定放弃编辑？" @confirm="onClose" okText="确定" cancelText="取消">
        <a-button style="margin-right: .8rem">取消</a-button>
      </a-popconfirm>
      <a-button @click="handleSubmit" type="primary" :loading="loading">提交</a-button>
    </div>
  </a-modal>
</template>
<script>
const formItemLayout = {
  labelCol: { span: 6 },
  wrapperCol: { span: 18 }
}
export default {
  name: 'BrandAdd',
  props: {
    brandAddVisiable: {
      default: false
    },
    brandInstId: '',
  },
  data() {
    return {
      loading: false,
      formItemLayout,
      form: this.$form.createForm(this),
      validateStatus: '',
      brand: {
        brandName: '',
        remark: '',
        menuId: ''
      }
    }
  },
  computed: {
    show: {
      get: function () {
        return this.brandAddVisiable
      },
      set: function () {
      }
    }
  },
  methods: {
    contactNameValidator(rule, value, callback) {
      if (!value) {
        callback(new Error('必填'))
      } else {
        callback(value ? (/(^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]{1,20}$)/.test(value) ? undefined : new Error('请输入正确的身份证格式')) : undefined)
      }
    },
    contactBrandDesc(rule, value, callback){
      if(value){
        if(this.computedBrandDescLen(value)>128){
          callback(new Error('最多可以输入128个字节(1个中文汉字占3个字节)'))
        }else{
          callback()
        }
      }
    },
    computedBrandDescLen(str){
          var len=0
          for(var i=0;i<str.length;i++){
            var c=str.charCodeAt(i)
            if((c>=0x0001&&c<=0x007e)||(0xff60<=c&&c<=0xff9f)){
              len++
            }else{
              len+=3
            }
          }
          return len
        },
    reset() {
      this.loading = false
      this.form.resetFields()
    },
    onClose() {
      this.reset()
      this.$emit('close')
    },
    handleSubmit() {
      this.form.validateFields((err, values) => {
        if (!err) {
          this.setBrandFields()
          this.loading = true
          this.brand.instId = this.brandInstId
          this.brand.optFlag = 'add'
          this.$post('terminalAdmin', {
            ...this.brand
          }).then((r) => {
            this.reset()
            this.$emit('success')
          }).catch(() => {
            this.loading = false
          })
        }
      })

    },

    setBrandFields() {
      let values = this.form.getFieldsValue(['brandCode', 'brandName', 'brandDesc', 'contactName', 'contactPhone', 'contactEmail'])
      if (typeof values !== 'undefined') {
        Object.keys(values).forEach(_key => { this.brand[_key] = values[_key] })
      }
    }
  },

}
</script>
